<template>
  <div class="Monitor">
    <logo></logo>
    <section class="monitor-item-list flex flex-wrap">
      <aside
        v-for="item in monitorlist"
        :key="item.EquipmentId"
      >
        <template>
          <van-cell
            is-link
            @click="showPopup(item)"
          >
            <div class="flex flex-box">
              <img
                :src="imgObj[item.Code]"
                class="img-icon"
              >
              <div class="monitor-text text-align-left">
                <p v-if="item.TableName=='CO?'">CO₂</p>
                <p v-else>{{item.TableName}}</p>
                <p><span :class="item.Code">{{item.Value}}</span><span>{{item.unit}}</span></p>
              </div>
            </div>
          </van-cell>
        </template>
      </aside>
    </section>
    <!-- 点击弹出层 -->
    <van-popup
      v-model="show"
      closeable
    >

      <div v-if="showContent.TableName=='CO?'">CO₂</div>
      <div v-else>{{showContent.TableName}}</div>
      <van-list
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了,只展示最新20条数据 "
      >
        <van-cell
          v-for="item in showlist"
          :key="item.AreaId"
          :title="'值：'+item.Value + '　　' + '创建时间：'+item.CreatedTime"
        />
      </van-list>
    </van-popup>
    <tabbar></tabbar>

  </div>
</template>

<script>
import tabbar from '@/components/Tabbar.vue'
import logo from '@/components/Logo.vue'
import { log } from 'util'
// 导入通信js
var signalR = require('@/assets/js/signalr.js')
export default {
  name: 'Monitor',
  components: {
    logo,
    tabbar
  },
  data() {
    return {
      monitorlist: [],
      imgObj: {
        T: require('../../assets/img/T.png'),
        C: require('../../assets/img/C.png'),
        E: require('../../assets/img/E.png'),
        WL: require('../../assets/img/WL.png'),
        H: require('../../assets/img/H.png'),
        P: require('../../assets/img/P.png'),
        WT: require('../../assets/img/WT.png'),
        LX: require('../../assets/img/LX.png')
      },
      show: false,
      showContent: {
        TableName: '',
        EquipmentId: '',
        CreatedTime: '',
        Code: '',
        Value: '',
        DetectionType: ''
      },
      // 点击弹出来的数据
      showlist: [],
      loading: false,
      finished: false
    }
  },
  created() {
    this.communication()
    this.getMonitor()
  },
  methods: {
    communication() {
      var connection = new signalR.HubConnectionBuilder().withUrl('http://120.79.190.214:121/chat').build()
      connection.on('GetCollectingMessage', function(tem) {
        console.log(tem)
        $('.' + tem.matchcode).text(tem.value)
      })
      connection.start().then(function() {
        connection.invoke('Send', '')
        event.preventDefault()
      })
    },
    async getMonitor() {
      const { data: res } = await this.$http.post(`EquipmentSensorRecord/GetEquipmentSensorRecordByAreaId`, {
        Id: '622ad4a7-fc01-4ff8-8069-3e591b120773'
      })
      this.monitorlist = res
      console.log(this.monitorlist)
    },
    async showPopup(item) {
      this.show = true
      console.log(item)
      this.showContent = item
      const { data: res } = await this.$http.post(`EquipmentSensorRecord/GetEquipmentSensorRecordList`, {
        limit: 20,
        Sord: 'DESC',
        sidx: 'CreatedTime',
        StartTime: '',
        EndTime: '',
        TableNames: 'Equipment_SensorRecord_' + item.Code,
        CorpName: ''
      })
      this.finished = true
      console.log(res.data)
      this.showlist = res.data
    }
  }
}
</script>

<style lang="less" scoped>
.Monitor{
background: #efefef;
}
.monitor-item-list {
  color: #fff;
  // background: #0d2732;
  
  height: 100%;
  // min-height: 38rem;
  padding: 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  aside {
    width: 50%;
    // padding-left: 30px;
    width: 49%;
    padding-top: 20px;
    box-sizing: border-box;
    .van-cell {
      padding: 0;
      background-color: unset;
      border-radius: 10px;
      .flex.flex-box {
        background: #fff;
        height: 6rem;
        box-shadow: 16px 16px 14px 15px #000;
        display: flex;
        align-items: center;
        justify-content: flex-start;
        padding-left: 27px;
      }
    }
    .van-cell__right-icon {
      display: none;
    }
    .van-popup {
      width: 98% !important;
      height: 22rem !important;
      background-color: rgba(255, 255, 255, 0);
    }
    div {
      p {
        margin: 0;
        padding: 0;
        font-size: 1rem;
        margin-left: 1rem;
        color: #000;
        // font-weight: bold;
      }
    }
  }
}
</style>